<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行、块、行内块元素</title>
    <style>
        /* 快：独占一行；宽度默认是父级100%；添加高与宽都生效 */
        div {
            width: 220px;
            height: 20px;
            background-color: #ccc;
        }

        /* 行内：不换行；设置宽高不生效；尺寸和内容的大小相同 */
        span {
            width: 220px;
            height: 300px;
            background-color: pink;
        }

        /* 行内块元素：一行显示多个；可以设置高宽 */
        image {
            width: 700px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 块内元素 -->
    <!-- 代表标签：
                div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、
                address、table、menu、pre、header、section、aside、footer -->
    <div>111</div>
    <div>222</div><br><hr>


    <!-- 行内元素 -->
    <!-- 代表标签： 
                a,sapn b,u ,i ,s , strong,ins,em,del.....-->
    <span>span</span>
    <span>span</span><br><hr>

    <!-- 行内块元素 -->
    <!-- 代表标签：
                input、text area、button、select -->

    <img src="../11.30/bargain.png" alt="">
    <img src="../11.30/bargain.png" alt="">

</body>
</html>